<template>
  <div class="my-container">
    <div class="left">我的</div>
    <div class="avatar">
      <van-image v-if="user" round src="https://img.yzcdn.cn/vant/cat.jpeg" />
      <van-icon name="contact" v-else />
      <div class="login" @click="onLogin">
        {{ user ? uname : '点击登录' }}
      </div>
    </div>
    <!-- 已登录 -->
    <div v-if="user">
      <van-grid clickable>
        <van-grid-item icon="column" text="个人资料" to="/per" />
        <van-grid-item icon="friends" text="我的关注" to="/follow" />
        <van-grid-item icon="chat" text="我的评价" />
        <van-grid-item icon="phone-circle" text="已联系家政员" to="/my/call" />
      </van-grid>
      <van-cell icon="column" is-link title="找家政服务记录" to="/serve" />
      <van-cell
        icon="todo-list"
        class="pad"
        is-link
        title="家政求职记录"
        to="/jobrecord"
      />

      <van-cell icon="checked" is-link title="身份认证通道" @click="chann" />
      <van-cell icon="info" is-link title="关于我们" to="/my/about" />
      <van-cell
        class="logout-cell"
        clickable
        title="退出登录"
        v-if="user"
        @click="onLogout"
      />
    </div>
    <!-- 未登录 -->
    <div v-else>
      <van-notice-bar
        class="mt-9"
        scrollable
        text="黑马家政 更好更全面的家政服务"
      />
      <van-cell icon="info" is-link title="关于我们" to="/my/about" />
    </div>

    <!-- 身份认证通道弹出层 -->
    <van-popup v-model="channel" position="bottom" class="identity">
      <button @click="$router.push('/authorized')">家服人员授权认证</button>
      <div class="xian"></div>
      <button @click="$router.push('/authentication')">
        家服公司管理员认证
      </button>
    </van-popup>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'MyPage',
  components: {},
  props: {},
  data () {
    return {
      channel: false,
      showShare: false
    }
  },
  computed: {
    ...mapState(['user', 'uname'])
  },
  watch: {},
  created () { },
  mounted () { },
  methods: {
    chann () {
      this.channel = true
    },
    onLogout () {
      this.$dialog.confirm({
        title: '确认退出登录吗'
      }).then(() => {
        this.$store.commit('setUser', null)
        this.$store.commit('setUname', null)
      }).catch(() => {
        // this.$toast('取消了退出')
      })
    },
    onLogin () {
      if (this.user) {
        return
      }
      this.$router.push('/login')
    }
  }
}
</script>

<style lang="less" scoped>
.my-container {
  height: 474px;
  background-color: #3f51b5;
  // text-align: center;
  border: 1px solid rgba(255, 255, 255, 100);
  .avatar {
    background-color: #3f51b5 !important;
  }
  .left {
    width: 64px;
    height: 44px;
    margin-left: 38px;
    margin-top: 64px;
    color: rgba(255, 255, 255, 100);
    font-size: 32px;
    font-weight: 600;
  }
  .logout-cell {
    text-align: center;
    margin-top: 10px;
    color: #3f51b5;
  }
  .mt-9 {
    text-align: center;
    height: 100px;
    margin-top: 230px;
  }
  .avatar {
    width: 136px;
    height: 134px;
    border-radius: 50%;
    line-height: 20px;
    margin: 0 auto;
    text-align: center;
    background-color: #eeecec;
    .van-icon {
      line-height: 134px;
      font-size: 100px;
      color: #979191;
    }
    /deep/.van-image__img {
      width: 136px;
      height: 134px;
      // color: #979191;
    }
  }
  /deep/.login {
    font-weight: 700;
    margin-top: 20px;
    padding-top: 34px;
    font-size: 14px;
    color: #fff;
  }
  .van-grid {
    margin-top: 206px;
    width: 684px;
    height: 162px;
    margin-left: 36px;
    margin-bottom: 72px;
  }
  .pad {
    margin-bottom: 16px;
  }
  .identity {
    height: 16%;
    .xian {
      height: 10px;
      background-color: #f4f2f2;
    }
    button {
      width: 100%;
      height: 50px;
      font-size: 26px;
      font-weight: 700;
      text-align: center;
      margin: 24px 0;
      border: none;
      background-color: #fff;
    }
  }
  /deep/.van-grid-item__content {
    padding: 0 0px;
    height: 122%;
  }
}
</style>
